<script setup>
import { onMounted, ref } from 'vue'
import { getMyReportAnswerAPI } from '@/api/user'
import { useUserStore } from '@/stores'
const userStore = useUserStore()

const myReportAnswer = ref([])
const getMyReportAnswer = async () => {
  const res = await getMyReportAnswerAPI({
    UserName: userStore.userInfo.userName
  })
  myReportAnswer.value = res.data
}

onMounted(() => {
  getMyReportAnswer()
})
</script>

<template>
  <div class="report-table-container">
    <el-table :data="myReportAnswer" border style="width: 100%">
      <el-table-column prop="FaBuUserName" label="举报用户" width="250" />
      <el-table-column prop="Reason" label="举报原因" width="350" />
      <el-table-column label="举报结果">
        <template #default="scope">
          <span :class="scope.row.Status == 1 ? 'red' : 'green'">
            {{ scope.row.Status == 1 ? '举报暂未受理' : '举报成功，回答已封禁' }}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
.report-table-container {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin: 20px auto;
  max-width: 800px; /* 设置最大宽度 */
}

.el-table {
  border-radius: 10px;
  overflow: hidden; /* 边框圆角 */
}

.el-table th,
.el-table td {
  text-align: center; /* 单元格文本居中 */
}

.red {
  font-weight: 700;
  color: red;
}

.green {
  font-weight: 700;
  color: green;
}
</style>
